<template>
    <template v-for="item, index in list" :key="index">
        <view class="item" :style="{ width: width, height: height, borderRadius: radius }"
            v-if="(!props.multiple && !index) || props.multiple">
            <wd-icon class="icon" name="error-fill" size="28rpx" color="rgba(0,0,0,0.5)" v-if="props.del"
                @click="$emit('del', index)" />
            <image v-if="item.type == 'image'" :src="item.url" :mode="mode" @click="if (preview) previewImg(item.url);"
                :style="{ borderRadius: radius }" />
            <video v-else-if="item.type == 'video'" @click.self.stop :src="item.url" object-fit="cover"
                :style="{ borderRadius: radius }" />
            <view v-else :style="{ width: width, height: height, borderRadius: radius }" class="text">{{ item.full_name
                }}</view>
        </view>
    </template>
</template>

<script lang="ts" setup>
const emit = defineEmits(['del'])
const list = ref([])
const props = defineProps({
    width: { type: String, default: '150rpx' },
    height: { type: String, default: '150rpx' },
    radius: { type: String, default: '' },
    mode: { type: String as any, default: 'aspectFill' },
    multiple: { type: Boolean, default: false },
    del: { type: Boolean, default: false },
    preview: { type: Boolean, default: false },
})
const model = defineModel<any>({ default: [] })
const setData = () => {
    if (model.value) {
        if (Array.isArray(model.value)) {
            if (model.value.length) list.value = model.value
        } else if (typeof model.value == 'object') {
            if (model.value) list.value = [model.value]
        } else {
            list.value = [{ type: 'image', url: model.value }]
        }
    } else {
        list.value = []
    }
}
setData()
watch(() => model, () => {
    setData()
}, { deep: true })

function previewImg(imageUrl: string) {
    var images = [];
    if (Array.isArray(imageUrl)) {
        for (let i in imageUrl) {
            images.push(imageUrl[i].path)
        }
    } else images.push(imageUrl);
    uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8990/6_1597822634094.png"]
        current: 0,
        urls: images,
        longPressActions: {  //长按保存图片到相册
            itemList: ['保存图片'],
            success: (data) => {
                if (data.tapIndex == 0 && data.index == 0) {
                    SaveImage(images);
                }
            },
            fail: (err) => {

            }
        }
    });
}

function SaveImage(urls) {
    uni.saveImageToPhotosAlbum({
        filePath: urls,
        success: () => {
            uni.showToast({
                title: '保存成功',
                icon: 'none'
            });
        },
        fail: () => {
            uni.showToast({
                title: '保存失败',
                icon: 'none'
            });
        }
    });
}
</script>

<style scoped>
.item {
    position: relative;
    display: inline-block;
    margin: 10rpx 20rpx 10rpx 0;
    vertical-align: top;
}

.item image,
.item video {
    width: 100%;
    height: 100%;
}

.icon {
    position: absolute;
    top: -16rpx;
    right: -16rpx;
    z-index: 1;
    padding: 2rpx;
    background: white;
    border-radius: 100rpx;
}

.text {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    text-align: center;
    background: #F5F5F5;
}
</style>